const styles = {
  container: {
    marginTop: '90px',
    marginBottom:'-30px',
    display: 'grid',
    gridTemplateColumns: 'repeat(2, 1fr)',
    gap: '20px',
    padding: '20px',
    backgroundColor: '#f8faff',
    borderRadius: '12px',
    boxShadow: '0 2px 12px rgba(0, 0, 0, 0.08)',
    minWidth:'1000px',
  },
  title: {
    color: '#1a1a1a',
    fontSize: '16px',
    fontWeight: '600',
    paddingBottom: '15px',
    borderBottom: '2px solid #1a8cff',
    margin: '0 0 20px 0'
  },
  item: {
    backgroundColor: 'white',
    borderRadius: '8px',
    padding: '14px',
    transition: 'all 0.2s ease',
    boxShadow: '0 2px 6px rgba(0, 0, 0, 0.05)',
    cursor: 'pointer',
    ':hover': {
      transform: 'translateY(-2px)',
      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
    }
  },
  itemTitle: {
    fontSize: '14px',
    color: '#2d2d2d',
    margin: '0 0 6px 0',
    lineHeight: '1.4'
  },
  source: {
    fontSize: '12px',
    color: '#666',
    margin: '0',
    fontWeight: '500'
  }
  };

const NewsSection = () => {
    const newsItems = [
      { title: '最新辟谣新闻1', source: '权威媒体' },
      { title: '虚假信息案例分析', source: '安全中心' },
      { title: '网络信息识别指南', source: '网信办' },
      { title: '最新辟谣新闻1', source: '权威媒体' },
      { title: '虚假信息案例分析', source: '安全中心' },
      { title: '网络信息识别指南', source: '网信办' },
      { title: '最新辟谣新闻1', source: '权威媒体' },
      { title: '虚假信息案例分析', source: '安全中心' },
      { title: '网络信息识别指南', source: '网信办' },
      { title: '最新辟谣新闻1', source: '权威媒体' },
    ];
  
    return (
      <div style={styles.container}>
        <h2 style={{...styles.title, gridColumn: '1 / -1'}}>近期热点新闻</h2>
        {newsItems.map((item, index) => (
          <div key={index} style={styles.item}>
            <h3 style={styles.itemTitle}>{item.title}</h3>
            <p style={styles.source}>来源: {item.source}</p>
          </div>
        ))}
      </div>
    );
  };
  

  
  export default NewsSection;